import React from 'react';
import {inject, observer} from 'mobx-react';
import { Route,withRouter } from 'react-router-dom';
import { SearchPage,SearchAdvanced,ListViewPage } from 'weaver-mobile-page';
import {SearchBar, Icon,Tools,Badge} from 'weaver-mobile';
import Doc from '../doc';
import QueueAnim from 'rc-queue-anim';
// import noImg from '../../img/noimg.png'
const getLabel = Tools.getLabel;
const noImg = "/images/ecology9/doc/mobile_default.png";
@withRouter
@inject('newsStore')
@observer
export default class NewsSearch extends React.Component {
  constructor(props) {
    super(props);
    this.backStart = '';//回退开始的路径地址，为了实现从列表回退的时候直接退回主界面
  }
  componentDidMount() {
    const {newsStore} = this.props, {searchAd} = newsStore;
    if (!newsStore.searchInited) {
      searchAd.getData({
        url: '/api/doc/mobile/news/searchListCondition',
        method: 'GET',
      });
      newsStore.searchNews();
    }else{
      newsStore.cloumnShowtype === "2"?
      newsStore.refreshLoading(newsStore.typeId)
      :newsStore.searchNews(newsStore.searchKey)
    }
  }
  getTemplate = (template) => {
    const newTemp = {
      ...template,
      default: [{
        key: 'col_1',
        render: (rowData) => {
          return (
            <div key={rowData.docid} className={rowData.summary?"news-desc-item":"news-nodesc-item"}>
                <img src={rowData.docimg?'/weaver/weaver.file.FileDownload?fileid='+ rowData.docimg:noImg} alt="" className="news-item-img"/>
              <div className="news-item-info">
                <div className="news-item-title">{rowData.docsubject}</div>
                <div className="news-item-desc">{rowData.summary}</div>
                <div className="news-item-operateDate">{rowData.docupdatedate}</div>
              </div>
            </div>
          );
        },
      }],
    };
    return newTemp;
  }

  getSystemDocTemplate = (template) => {
    const newTemp = {
      ...template,
      default: [{
        key: 'col_1',
        render: (rowData) => {
          const itemClsPre = 'system-doc-list-row';
          const isnew = parseInt(rowData.isnew);
          return (
            <div key={rowData.docid} className={itemClsPre}>
              {
                rowData.icon.iconUrl ?
                  <img src={rowData.icon.iconUrl} alt="" className={`${itemClsPre}-img`}/>
                  :
                  <Icon type={`${rowData.icon.iconType}`} size="lg" className={`${itemClsPre}-img`} color={`${rowData.icon.iconColor}`}/>
              }
              {isnew ? <Badge dot/> : ''}
              <div className={`${itemClsPre}-content`}>
                <div className={`${itemClsPre}-title`}>{rowData.docsubject}</div>
                <div className={`${itemClsPre}-sub`}>
                  <span className={`${itemClsPre}-sub-username`}>{rowData.owner}</span>
                  <span>{rowData.docupdatedate}</span>
                  {/* { <span className={`${itemClsPre}-sub-right`}>{rowData.docstatus}</span>} */}
                </div>
              </div>
            </div>
          );
        },
      }],
    };
    return newTemp;
  }
  shouldComponentUpdate(nextProps, nextState) {
    const {history, newsStore} = nextProps,
      {location} = this.props, {pathname} = location,
      {searchAd} = newsStore;
    if (history.action === 'POP') {
      // 如果是后退，且之前的页面是搜索页面，则直接退回；由于搜索页面与高级搜索页面会形成循环嵌套，所以两个都要比较
      if (pathname === '/newsSearch' || pathname === searchAd.path) {
        // 记录最初的回退是哪个页面
        if (!this.backStart) {
          this.backStart = pathname;
        }
        if (this.backStart === '/newsSearch') {
          history.goBack();
          return false;
        }
      }
    }
    this.backStart = '';
    return true;
  }
  render() {
    const {newsStore, location, history,path} = this.props, {scope,searchAd,searchPage,newsSearchListViewPageStore} = newsStore,
      {pathname} = location;
    let onlyAdvance = pathname === searchAd.path;//判断是否只显示高级搜索，避免从外部点进来的时候页面中输入框显示两次的问题
    return (
      <div className="wea-news-search">
        <Route
          key="news-doc-search"
          path={`${path}/newsSearch/doc/:id`}
          render={() => {
            return (
              <QueueAnim>
                <div className="wm-route-layout" key="news-doc-search-div">
                  <Doc path= {`${path}/newsSearch`}/>
                </div>
              </QueueAnim>
            );
          }}
        />
        <SearchAdvanced
          store={searchAd}
          buttonGroupData={[
            { key: 'reset',
              text: getLabel(2022,"重置"),
              onClick: () => {
                searchAd.form.resetFields()
              }
            },
            { key: 'submit',
              text: getLabel(826,"确定"),
              onClick: () => {
                newsStore.searchNews();
                history.push(`${path}/newsSearch`);
              },
              type: 'primary',
            }
          ]}
        />
        {!onlyAdvance && <div>
          <SearchBar
            // className="search-select"
            showExtraButton
            value={newsStore.searchKey.keyword ? newsStore.searchKey.keyword : ''}
            placeholder={getLabel(347,"搜索")}
            onFocus={()=>history.push(searchPage.path)}
            extraButton={[
              { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> },
            ]}
            onExtraButtonClick={(key) => history.push(searchAd.path)}
          />
          <SearchPage
            store={searchPage}
            type={1}
            nameKey="name"
            rowKey="key"
            searchValue={newsStore.searchKey.keyword ? newsStore.searchKey.keyword : ''}
            onChange={(v) => newsStore.updateSearchDocSubject(v)}
            onSubmit={(v) => {
              newsStore.doSearchByKeyword(typeof(v) === 'string' ? v : v.name)
            }}
            onClear={()=>{
              newsStore.clearSearchHistory();
            }}
          />
        </div>}
        
        {!onlyAdvance && newsSearchListViewPageStore &&
        (newsStore.cloumnShowtype === "2"
        ?<ListViewPage.Normal
          className="search-news-systemdoc-list"
          getDataCustom={true}
          store={newsSearchListViewPageStore}
          customHeight="100%"
          onRowClick={(rowData) => {
            newsStore.setDocSearchNew(rowData.docid);
            window.location=`/spa/document/static4mobile/index.html#/doc/${rowData.docid}`;
            // this.props.history.push(`/news/${scope}/doc/${rowData.docid}`);
          }}
          getTemplate={this.getSystemDocTemplate}
          onEndReached={newsStore.searchNewsNext}
          onRefresh={() => newsStore.refreshLoading(newsStore.typeId)}
        />
        :<ListViewPage.Normal
          className="search-news-list"
          getDataCustom={true}
          store={newsSearchListViewPageStore}
          onRowClick={(rowData) =>{

            window.location=`/spa/document/static4mobile/index.html#/doc/${rowData.docid}`;
            //  history.push(`${path}/newsSearch/doc/${rowData.docid}`)
          }}
          getTemplate={this.getTemplate}
          onEndReached={newsStore.searchNewsNext}
          customHeight="100%"
          onRefresh={() => newsStore.searchNews(newsStore.searchKey)}
        />)}
      </div>
    );
  }
  
}